<template>
  <p class="my-[5px]"> 零件类别名称:</p>
  <div>
    <el-table :data="totalstore.totalData" border style="width: 100%;height:150px"
      :row-class-name="tableRowClassName">
      <el-table-column prop="partTypeName" label="零件类别名称" />
      <el-table-column prop="num" label="数量" />
      <el-table-column prop="capacity" label="器具容量" />
    </el-table>
  </div>
</template>
<script setup lang='js' name='MiddleTable'>
// 在store中获取到左上角统计数据
import {useTotalStore}from '@/stores/total'
const totalstore = useTotalStore()
// 隔行改变背景色
const tableRowClassName = ({ row, rowIndex }) => {
  return rowIndex % 2 === 1 ? 'even-row' : 'odd-row';
};
</script>
<style scoped>
* {
  overflow: hidden;
}

:deep(.el-table__header th) {
  background-color: #00b0f0 !important;
  color: white;
  text-align: center !important;
}

:deep(.even-row) {
  background-color: #e7f2fc !important;

}

:deep(.odd-row) {
  background-color: rgb(203, 226, 240) !important;

}

:deep(.el-table__row) {
  height: 10px;
}

:deep(.el-table .cell) {
  text-align: center;
}

/* 禁用鼠标悬停效果 */
:deep(.el-table--enable-row-hover .el-table__body tr:hover>td) {
  background-color: inherit !important;
}
</style>